<template>
  <md-nav-bar title="礼品卡兑换" backgroundColor="#ffffff" />
  <view class="card-section">
    <view class="form">
      <uni-forms ref="form" :modelValue="formData" label-position="top" :rules="rules" label-width="100">
        <uni-forms-item label="卡号" name="cardAccount" required>
          <uni-easyinput type="text" v-model="formData.cardAccount" placeholder="请输入卡号" />
        </uni-forms-item>
        <uni-forms-item label="密码" name="cardPassword" required>
          <uni-easyinput type="text" v-model="formData.cardPassword" placeholder="请输入密码" />
        </uni-forms-item>
      </uni-forms>
      <button class="submit-btn" @click="submit">提交</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import api from '@/api/index';
const form = ref(null);
const formData = ref({
  cardAccount: null,
  cardPassword: null,
});
const rules = ref({
  cardAccount: {
    rules: [
      {
        required: true,
        errorMessage: '请输入卡号',
      },
    ],
  },
  cardPassword: {
    rules: [
      {
        required: true,
        errorMessage: '请输入密码',
      },
    ],
  },
});

const submit = async () => {
  await form.value?.validate();
  await api.Pay.rechargeWithRechargeCard(formData.value);
  uni.showModal({
    title: '提示',
    content: '兑换成功',
    showCancel: false,
    success: res => {
      if (res.confirm) {
        uni.navigateBack();
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.card-section {
  background: #fff;
  height: 100vh;
  padding: 30rpx;
}
.submit-btn {
  width: 100%;
  height: 90rpx;
  background: #1fa37a;
  color: #fff;
  font-size: 36rpx;
  border-radius: 60rpx;
  font-weight: 600;
  margin: 40rpx 0 0 0;
  border: none;
  box-shadow: 0 4rpx 16rpx 0 #e0e0e0;
}
</style>